<template>
  <div :class="classA">
    <div :class="classB">
      <b-modal ref="myWarning1" hide-footer title="提示">
        <div class="d-block text-center">
          <h4>未找到相关乐队!</h4>
        </div>
      </b-modal>

      <b-sidebar
        id="sidebar-right"
        title="艺人列表"
        bg-variant="dark"
        text-variant="light"
        width="310px"
        right
        shadow
        visible
      >
        <div class="px-3 py-2">
          <b-row v-for="(item, index) in artistList" :key="index">
            <b-col>
              <router-link target="_blank"
                :to="{path: '/artist/'+item.alias, query: {id: 'artist', name: item.alias}}"
              >
                <span v-if="item">
                  {{item.name}}
                  <span style="color: grey;">{{item.name_chs}}</span>
                </span>
              </router-link>
            </b-col>
          </b-row>
        </div>
        <br />
        <br />
        <br />
      </b-sidebar>

      <div class="top2"></div>
      <div class="title">
        <h4>&nbsp;&nbsp;{{category_name}}</h4>
      </div>
      <b-container>
        <div class="content_artist">
          <div class="content_img">
            <b-carousel
              id="carousel1"
              style="font-family: Segoe UI, Verdana, Tahoma, Arial; font-weight: 700; text-shadow: 1px 1px 2px #333;"
              controls
              indicators
              background="black"
              :interval="4000"
              img-width="700"
              img-height="420"
              v-model="slide"
              @sliding-start="onSlideStart"
              @sliding-end="onSlideEnd"
              v-if="category == 'britpop'"
            >
              <router-link target="_blank"
			    :to="{path: '/artist/oasis'}"
			  >
                <b-carousel-slide caption="Oasis" text="绿洲，最大牌的Britpop乐团 & 最大牌的曼城足球流氓">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/oasis.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
			    :to="{path: '/artist/suede'}"
			  >
                <b-carousel-slide caption="Suede" text="山羊皮，最性感的Britpop乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/suede.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/radiohead'}"
              >
                <b-carousel-slide caption="Radiohead" text="电台司令，世界最佳吉他摇滚乐团，丧界扛把子">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/radiohead.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
			    :to="{path: '/artist/blur'}"
			  >
                <b-carousel-slide caption="Blur" text="模糊乐队，Britpop界的小资阶级，Oasis的死对头">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/blur.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
			    :to="{path: '/artist/the-verve'}"
			  >
                <b-carousel-slide caption="The Verve" text="神韵，由Shoegazing风格华丽转变为Britpop的大牌乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/theverve.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>
            </b-carousel>

            <b-carousel
              id="carousel1"
              style="text-shadow: 1px 1px 2px #333;"
              controls
              indicators
              background="black"
              :interval="4000"
              img-width="700"
              img-height="420"
              v-model="slide"
              @sliding-start="onSlideStart"
              @sliding-end="onSlideEnd"
              v-if="category == 'scotland'"
            >
              <router-link target="_blank"
                :to="{path: '/artist/belle-and-sebastian'}"
              >
                <b-carousel-slide caption="Belle & Sebastian" text="苏格兰最知名的独立流行乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/belleandsebastian.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/camera-obscura'}"
              >
                <b-carousel-slide caption="Camera Obscura" text="来自格拉斯哥的独立女声乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/cameraobscura.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/teenage-fanclub'}"
              >
                <b-carousel-slide caption="Teenage Fanclub" text="苏格兰老牌另类摇滚乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/teenagefanclub.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/cocteau-twins'}"
              >
                <b-carousel-slide caption="Cocteau Twins" text="极地双子星，天籁女声，4AD旗下传奇乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/cocteautwins.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/veronica-falls'}"
              >
                <b-carousel-slide caption="Veronica Falls" text="最性感的Lo-Fi流行乐队">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/veronicafalls.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>
            </b-carousel>

            <b-carousel
              id="carousel1"
              style="text-shadow: 1px 1px 2px #333;"
              controls
              indicators
              background="black"
              :interval="4000"
              img-width="700"
              img-height="420"
              v-model="slide"
              @sliding-start="onSlideStart"
              @sliding-end="onSlideEnd"
              v-if="category == 'shoegaze'"
            >
              <router-link target="_blank"
                :to="{path: '/artist/my-bloody-valentine'}"
              >
                <b-carousel-slide caption="My Bloody Valentine" text="最大牌的自赏派乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/mybloodyvalentine.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
			    :to="{path: '/artist/ride'}"
			  >
                <b-carousel-slide caption="Ride" text="第二大牌的自赏派乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/ride.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/slowdive'}"
              >
                <b-carousel-slide caption="Slowdive" text="第三大牌的自赏派乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/slowdive.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/pale-saints'}"
              >
                <b-carousel-slide caption="Pale Saints" text="来自英国利兹的自赏派乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/palesaints.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/lush'}"
			  >
                <b-carousel-slide caption="Lush" text="来自伦敦的自赏派女声乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/lush.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>
            </b-carousel>

            <b-carousel
              id="carousel1"
              style="text-shadow: 1px 1px 2px #333;"
              controls
              indicators
              background="black"
              :interval="4000"
              img-width="700"
              img-height="420"
              v-model="slide"
              @sliding-start="onSlideStart"
              @sliding-end="onSlideEnd"
              v-if="category == 'ireland'"
            >
              <router-link target="_blank"
			    :to="{path: '/artist/u2'}"
			  >
                <b-carousel-slide caption="U2" text="八十年代世界上最成功的摇滚乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/u2.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/the-cranberries'}"
              >
                <b-carousel-slide caption="The Cranberries" text="小红莓，爱尔兰历史上最著名的另类摇滚乐团">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/thecranberries.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
			    :to="{path: '/artist/enya'}"
			  >
                <b-carousel-slide caption="Enya" text="恩雅，New Age天后，爱尔兰最著名女歌手">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/enya.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/Sinéad-OConnor'}"
              >
                <b-carousel-slide caption="Sinead O'Connor" text="叛逆女声，风格另类的创作型光头女歌手">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/sineadoconnor.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
			    :to="{path: '/artist/clannad'}"
			  >
                <b-carousel-slide caption="Clannad" text="克兰纳德家族乐团，女主唱Moya Brennan是Enya的姐姐">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/clannad.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>
            </b-carousel>

            <b-carousel
              id="carousel1"
              style="text-shadow: 1px 1px 2px #333;"
              controls
              indicators
              background="black"
              :interval="4000"
              img-width="700"
              img-height="420"
              v-model="slide"
              @sliding-start="onSlideStart"
              @sliding-end="onSlideEnd"
              v-if="category == 'electronic'"
            >
              <router-link target="_blank"
                :to="{path: '/artist/aphex-twin'}"
              >
                <b-carousel-slide caption="Aphex Twin" text="原名Richard D James，现时代最重要也具争议的电子大师之一">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/aphextwin.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/massive-attack'}"
              >
                <b-carousel-slide caption="Massive Attack" text="Trip-Hop界三巨头之一">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/massiveattack.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
			    :to="{path: '/artist/the-prodigy'}"
			  >
                <b-carousel-slide caption="The Prodigy" text="英国电音摇滚的超级巨星，班霸级乐队">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/prodigy.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/autechre'}"
              >
                <b-carousel-slide caption="Autechre" text="来自英国罗奇代尔的科技舞曲双人组合">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/autechre.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>
            </b-carousel>

            <b-carousel
              id="carousel1"
              style="text-shadow: 1px 1px 2px #333;"
              controls
              indicators
              background="black"
              :interval="4000"
              img-width="700"
              img-height="420"
              v-model="slide"
              @sliding-start="onSlideStart"
              @sliding-end="onSlideEnd"
              v-if="category == 'classic'"
            >
              <router-link target="_blank"
			    :to="{path: '/artist/the-beatles'}"
			  >
                <b-carousel-slide caption="The Beatles" text="披头士，流行音乐界史上最伟大，最有影响力，拥有最多歌迷，最为成功的乐队">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/beatles.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/the-rolling-stones'}"
              >
                <b-carousel-slide
                  caption="The Rolling Stones"
                  text="滚石，摇滚史上最成功和最长寿的乐队之一，堪称摇滚的定义者之一"
                >
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/rollingstones.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/led-zeppelin'}"
              >
                <b-carousel-slide caption="Led Zeppelin" text="齐柏林飞艇，硬摇滚和重金属鼻祖，20世纪最流行最具影响力的摇滚乐队之一">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/ledzeppelin.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/pink-floyd'}"
              >
                <b-carousel-slide caption="Pink Floyd" text="平克·弗洛伊德，迷幻、太空摇滚的鼻祖">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/pinkfloyd.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
			    :to="{path: '/artist/the-who'}"
			  >
                <b-carousel-slide caption="The Who" text="谁人，砸琴鼻祖、摇滚演出史上现场音量最大的乐队">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/thewho.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>
            </b-carousel>

            <b-carousel
              id="carousel1"
              style="text-shadow: 1px 1px 2px #333;"
              controls
              indicators
              background="black"
              :interval="4000"
              img-width="700"
              img-height="420"
              v-model="slide"
              @sliding-start="onSlideStart"
              @sliding-end="onSlideEnd"
              v-if="category == 'female'"
            >
              <router-link target="_blank"
			    :to="{path: '/artist/adele'}"
			  >
                <b-carousel-slide caption="Adele" text="英国最著名最富有的女歌手，殿堂级灵魂歌者">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/adele.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/lily-allen'}"
              >
                <b-carousel-slide caption="Lily Allen" text="我行我素口无遮拦的“英国天才女歌手”">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/lilyallen.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
			    :to="{path: '/artist/dido'}"
			  >
                <b-carousel-slide caption="Dido" text="著名创作型才女，来自英伦的治愈声音">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/dido.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/amy-winehouse'}"
              >
                <b-carousel-slide caption="Amy Winehouse" text="英年早逝的爵士女歌手">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/amywinehouse.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/beth-orton'}"
              >
                <b-carousel-slide caption="Beth Orton" text="融合传统民谣和Trip-Hop电子节奏的女歌手">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/bethorton.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>
            </b-carousel>

            <b-carousel
              id="carousel1"
              style="text-shadow: 1px 1px 2px #333;"
              controls
              indicators
              background="black"
              :interval="4000"
              img-width="700"
              img-height="420"
              v-model="slide"
              @sliding-start="onSlideStart"
              @sliding-end="onSlideEnd"
              v-if="category == 'male'"
            >
              <router-link target="_blank"
                :to="{path: '/artist/david-bowie'}"
              >
                <b-carousel-slide caption="David Bowie" text="游走于艺术和时尚的摇滚变色龙">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/davidbowie.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/nick-drake'}"
              >
                <b-carousel-slide caption="Nick Drake" text="英年早逝的民谣诗人">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/nickdrake.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/van-morrison'}"
              >
                <b-carousel-slide caption="Van Morrison" text="爱尔兰音乐教父">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/vanmorrison.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/james-blunt'}"
              >
                <b-carousel-slide caption="James Blunt" text="有上尉诗人美誉的英国流行歌手">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/jamesblunt.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>

              <router-link target="_blank"
                :to="{path: '/artist/ed-sheeran'}"
              >
                <b-carousel-slide caption="Ed Sheeran" text="黄老板">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/edsheeran.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>
            </b-carousel>
			
            <b-carousel
              id="carousel1"
              style="font-family: Segoe UI, Verdana, Tahoma, Arial; font-weight: 700; text-shadow: 1px 1px 2px #333;"
              controls
              indicators
              background="black"
              :interval="4000"
              img-width="700"
              img-height="420"
              v-model="slide"
              @sliding-start="onSlideStart"
              @sliding-end="onSlideEnd"
              v-if="category == 'indie'"
            >
			
			  <router-link target="_blank"
			    :to="{path: '/artist/the-xx'}"
			  >
                <b-carousel-slide caption="The xx" text="崇尚极简、气质迷离的独立电子乐队">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/xx.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>
			
			  <router-link target="_blank"
                :to="{path: '/artist/arctic-monkeys'}"
              >
                <b-carousel-slide caption="Arctic Monkeys" text="腐国最后一支伟大的摇滚乐队">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/arcticmonkeys.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>
			  
			  <router-link target="_blank"
                :to="{path: '/artist/black-country-new-road'}"
              >
                <b-carousel-slide caption="Black Country, New Road" text="英国后朋克新浪潮中最具代表性的乐队">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/blackcountrynewroad.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>
			  
			  <router-link target="_blank"
                :to="{path: '/artist/the-1975'}"
              >
                <b-carousel-slide caption="The 1975" text="打着摇滚的旗号的POP组合">
                  <img
                    slot="img"
                    class="d-block img-fluid w-100"
                    src="@/assets/img/category/the1975.jpg"
                    alt="image slot"
                  />
                </b-carousel-slide>
              </router-link>
			
            </b-carousel>			
			
          </div>
        </div>

        <br />
        <div class="content_album">
          <b-row align-v="center" align-h="center">
            <h4>&nbsp;经&nbsp;典&nbsp;专&nbsp;辑&nbsp;</h4><b-icon icon="arrow-clockwise" v-on:click="listAlbum" font-scale="1" class="pointer"></b-icon>
          </b-row>
          <b-row align-v="center" align-h="center" style="padding: 0px 9px;" v-if="albumList != undefined && albumList != null && albumList.length > 0">
            <!--<b-row align-v="center" align-h="center" v-if="category == 'britpop'" style="padding: 0px 10px;">
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/suede/album?name=Suede&category=album&artist=suede'}">
              <b-img thumbnail fluid :src="album31" title="Suede - Suede" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/oasis/album?id=album&name=%28What%27s-The-Story%29-Morning-Glory%3F&category=album&artist=oasis'}">
              <b-img thumbnail fluid :src="album32" title="Oasis - (What's The Story) Morning Glory?" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/radiohead/album?id=album&name=The-Bends&category=album&artist=radiohead'}">
              <b-img thumbnail fluid :src="album33" title="Radiohead - The Bends" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/radiohead/album?id=album&name=OK-Computer&category=album&artist=radiohead'}">
              <b-img thumbnail fluid :src="album34" title="Radiohead - OK Computer" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/auteurs/album?id=album&name=New-Wave&category=album&artist=auteurs'}">
              <b-img thumbnail fluid :src="album35" title="The Auteurs - New Wave" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/verve/album?id=album&name=Urban-Hymns&category=album&artist=verve'}">
              <b-img thumbnail fluid :src="album36" title="The Verve - Urban Hymns" style="height:150px"/>
            </router-link>
            </b-col>-->
            <span v-for="(item,index) in albumList" :key="index">
              <b-col cols="auto" style="padding: 11px;">
                <router-link target="_blank"
                  :to="{path: '/artist/'+item.artist.alias+'/album', query: {name: `${item.alias}`}}"
                >
                  <b-img
                    thumbnail
                    fluid
                    :src="item.cover"
                    :title="item.artist.name + ' 《' + item.name + '》'"
                    class="placeholder148"
                  />
                </router-link>
              </b-col>
            </span>
          </b-row>

          <!--<b-row align-v="center" align-h="center" v-if="category == 'scotland'" style="padding: 0px 10px;">
            <b-col cols="auto" style="padding: 10px;">
            <router-link :to="{path: '/artist/belleandsebastian/album?id=album&name=If-You%27re-Feeling-Sinister&category=album&artist=belleandsebastian'}">
              <b-img thumbnail fluid :src="album1" title="Belle & Sebastian - If You're Feeling Sinister" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 10px;">
            <router-link :to="{path: '/artist/belleandsebastian/album?id=album&name=The-Boy-With-The-Arab-Strap&category=album&artist=belleandsebastian'}">
              <b-img thumbnail fluid :src="album2" title="Belle & Sebastian - The Boy With The Arab Strap" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 10px;">
            <router-link :to="{path: '/artist/cameraobscura/album?id=album&name=Let%27s-Get-Out-Of-This-Country&category=album&artist=cameraobscura'}">
              <b-img thumbnail fluid :src="album3" title="Camera Obscura - Let's Get Out Of This Country" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 10px;">
            <router-link :to="{path: '/artist/teenagefanclub/album?id=album&name=Bandwagonesque&category=album&artist=teenagefanclub'}">
              <b-img thumbnail fluid :src="album4" title="Teenage Fanclub - Bandwagonesque" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 10px;">
            <router-link :to="{path: '/artist/cocteautwins/album?id=album&name=The-Pink-Opaque&category=compilation&artist=cocteautwins'}">
              <b-img thumbnail fluid :src="album5" title="Cocteau Twins - The Pink Opaque" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 10px;">
            <router-link :to="{path: '/artist/veronicafalls/album?id=album&name=Veronica-Falls&category=album&artist=veronicafalls'}">
              <b-img thumbnail fluid :src="album6" title="Veronica Falls - Veronica Falls" style="height:150px"/>
            </router-link>
            </b-col>
          </b-row>
          
          <b-row align-v="center" align-h="center" v-if="category == 'shoegaze'" style="padding: 0px 10px;">
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/mybloodyvalentine/album?id=album&name=Loveless&category=album&artist=mybloodyvalentine'}">
              <b-img thumbnail fluid :src="album11" title="My Bloody Valentine - Loveless" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/ride/album?id=album&name=Nowhere&category=album&artist=ride'}">
              <b-img thumbnail fluid :src="album12" title="Ride - Nowhere" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/slowdive/album?id=album&name=Souvlaki&category=album&artist=slowdive'}">
              <b-img thumbnail fluid :src="album13" title="Slowdive - Souvlaki" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/palesaints/album?id=album&name=The-Comforts-Of-Madness&category=album&artist=palesaints'}">
              <b-img thumbnail fluid :src="album14" title="Pale Saints - The Comforts Of Madness" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/lush/album?id=album&name=Ciao%21-Best-Of-Lush&category=compilation&artist=lush'}">
              <b-img thumbnail fluid :src="album15" title="Lush - Ciao! Best Of Lush" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/radiodept/album?id=album&name=Clinging-to-a-Scheme&category=album&artist=radiodept'}">
              <b-img thumbnail fluid :src="album16" title="The Radio Dept. - Clinging to a Scheme" style="height:150px"/>
            </router-link>
            </b-col>
          </b-row>
          
          <b-row align-v="center" align-h="center" v-if="category == 'ireland'" style="padding: 0px 10px;">
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/u2/album?id=album&name=The-Joshua-Tree&category=album&artist=u2'}">
              <b-img thumbnail fluid :src="album21" title="U2 - The Joshua Tree" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/u2/album?id=album&name=Achtung-Baby&category=album&artist=u2'}">
              <b-img thumbnail fluid :src="album22" title="U2 - Achtung Baby" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/u2/album?id=album&name=The-Best-of-1980-1990&category=compilation&artist=u2'}">
              <b-img thumbnail fluid :src="album23" title="U2 - The Best of 1980-1990" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/cranberries/album?id=album&name=No-Need-to-Argue&category=album&artist=cranberries'}">
              <b-img thumbnail fluid :src="album24" title="The Cranberries - No Need to Argue" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/enya/album?id=album&name=Watermark&category=album&artist=enya'}">
              <b-img thumbnail fluid :src="album25" title="Enya - Watermark" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/sineadoconnor/album?id=album&name=I-Do-Not-Want-What-I-Haven%27t-Got&category=album&artist=sineadoconnor'}">
              <b-img thumbnail fluid :src="album26" title="Sinéad O'Connor - I Do Not Want What I Haven't Got" style="height:150px"/>
            </router-link>
            </b-col>
          </b-row>  

          <b-row align-v="center" align-h="center" v-if="category == 'electronic'" style="padding: 0px 10px;">
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/xx/album?id=album&name=xx&category=album&artist=xx'}">
              <b-img thumbnail fluid :src="album41" title="The xx - xx" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/xx/album?id=album&name=I-See-You&category=album&artist=xx'}">
              <b-img thumbnail fluid :src="album42" title="The xx - I See You" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/aphextwin/album?id=album&name=Selected-Ambient-Works-85-92&category=album&artist=aphextwin'}">
              <b-img thumbnail fluid :src="album43" title="Aphex Twin - Selected Ambient Works 85-92" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/massiveattack/album?id=album&name=Blue-Lines&category=album&artist=massiveattack'}">
              <b-img thumbnail fluid :src="album44" title="Massive Attack - Blue Lines" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/prodigy/album?id=album&name=The-Fat-of-the-Land&category=album&artist=prodigy'}">
              <b-img thumbnail fluid :src="album45" title="The Prodigy - The Fat of the Land" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/depechemode/album?id=album&artist=depechemode&category=album&name=Violator'}">
              <b-img thumbnail fluid :src="album46" title="Depeche Mode - Violator" style="height:150px"/>
            </router-link>
            </b-col>
          </b-row> 
          
          <b-row align-v="center" align-h="center" v-if="category == 'classic'" style="padding: 0px 10px;">
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/ledzeppelin/album?id=album&artist=ledzeppelin&category=album&name=Led-Zeppelin-IV'}">
              <b-img thumbnail fluid :src="album51" title="Led Zeppelin - Led Zeppelin IV" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/pinkfloyd/album?id=album&artist=pinkfloyd&category=album&name=The-Dark-Side-of-the-Moon'}">
              <b-img thumbnail fluid :src="album53" title="Pink Floyd - The Dark Side of the Moon" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/beatles/album?id=album&artist=beatles&category=album&name=The-Beatles-%28The-White-Album%29'}">
              <b-img thumbnail fluid :src="album52" title="The Beatles - The Beatles (The White Album)" style="height:150px"/>
            </router-link>
            </b-col>            
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/thewho/album?id=album&artist=thewho&category=album&name=Who%27s-Next'}">
              <b-img thumbnail fluid :src="album54" title="The Who - Who's Next" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/sexpistols/album?id=album&artist=sexpistols&category=album&name=Never-Mind-the-Bollocks-Here%27s-the-Sex-Pistols'}">
              <b-img thumbnail fluid :src="album55" title="Sex Pistols - Never Mind the Bollocks Here's the Sex Pistols" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/thecure/album?id=album&artist=thecure&category=album&name=Disintegration'}">
              <b-img thumbnail fluid :src="album56" title="The Cure - Disintegration" style="height:150px"/>
            </router-link>
            </b-col>
          </b-row> 

          <b-row align-v="center" align-h="center" v-if="category == 'female'" style="padding: 0px 10px;">
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/adele/album?id=album&artist=adele&category=album&name=21'}">
              <b-img thumbnail fluid :src="album61" title="Adele - 21" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/lilyallen/album?id=album&artist=lilyallen&category=album&name=It%27s-Not-Me,-It%27s-You'}">
              <b-img thumbnail fluid :src="album62" title="Lily Allen - It's Not Me, It's You" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/amywinehouse/album?id=album&artist=amywinehouse&category=album&name=Back-to-Black'}">
              <b-img thumbnail fluid :src="album63" title="Amy Winehouse - Back to Black" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/bethorton/album?id=album&artist=bethorton&category=album&name=Trailer-Park'}">
              <b-img thumbnail fluid :src="album64" title="Beth Orton - Trailer Park" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/katenash/album?id=album&artist=katenash&category=album&name=Made-of-Bricks'}">
              <b-img thumbnail fluid :src="album65" title="Kate Nash - Made of Bricks" style="height:150px"/>
            </router-link>
            </b-col>
            <b-col cols="auto" style="padding: 11px;">
            <router-link :to="{path: '/artist/pjharvey/album?id=album&artist=pjharvey&category=album&name=Rid-of-Me'}">
              <b-img thumbnail fluid :src="album66" title="PJ Harvey - Rid of Me" style="height:150px"/>
            </router-link>
            </b-col>            
          </b-row>-->
        </div>
      </b-container>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData(context) {
      let [request1Data, request2Data] = await Promise.all([
        context.$axios.get('/api/artists/', { params: { category: context.route.params.name, showLoading: false } }),
        context.$axios.get('/api/albums-recommend/', { params: { category: context.route.params.name, showLoading: false } }),
        //context.$axios.get('/api/comments-num/', { params: { showLoading: false } }),
      ]).catch(err => {
        console.log(err);
      });
      return {
        artistList: request1Data.data,
        albumList: request2Data.data,
      };
  },
  data() {
    return {
      category: this.$route.params.name,
      category_name: '',
      slide: 0,
      sliding: null,
      inputVal: '',
      fuzzy_list: [],

      classA: this.$route.params.name + '-blur',
      classB: this.$route.params.name,

      album1: require('@/assets/img/band/belleandsebastian/album/album_belleandsebastian_02.jpg'),
      album2: require('@/assets/img/band/belleandsebastian/album/album_belleandsebastian_03.jpg'),
      album3: require('@/assets/img/band/cameraobscura/album/album_cameraobscura_03.jpg'),
      album4: require('@/assets/img/band/teenagefanclub/album/album_teenagefanclub_02.jpg'),
      album5: require('@/assets/img/band/cocteautwins/album/album_cocteautwins_10.jpg'),
      album6: require('@/assets/img/band/veronicafalls/album/album_veronicafalls_01.jpg'),

      album11: require('@/assets/img/band/mybloodyvalentine/album/album_mybloodyvalentine_03.jpg'),
      album12: require('@/assets/img/band/ride/album/album_ride_01.jpg'),
      album13: require('@/assets/img/band/slowdive/album/album_slowdive_02.jpg'),
      album14: require('@/assets/img/band/palesaints/album/album_palesaints_01.jpg'),
      album15: require('@/assets/img/band/lush/album/album_lush_05.jpg'),
      album16: require('@/assets/img/band/radiodept/album/album_radiodept_03.jpg'),

      album21: require('@/assets/img/band/u2/album/album_u2_02.jpg'),
      album22: require('@/assets/img/band/u2/album/album_u2_01.jpg'),
      album23: require('@/assets/img/band/u2/album/album_u2_13.jpg'),
      album24: require('@/assets/img/band/cranberries/album/album_cranberries_02.jpg'),
      album25: require('@/assets/img/band/enya/album/album_enya_03.jpg'),
      album26: require('@/assets/img/band/sineadoconnor/album/album_sineadoconnor_02.jpg'),

      album31: require('@/assets/img/band/suede/album/album_suede_01.jpg'),
      album32: require('@/assets/img/band/oasis/album/album_oasis_02.jpg'),
      album33: require('@/assets/img/band/radiohead/album/album_radiohead_02.jpg'),
      album34: require('@/assets/img/band/radiohead/album/album_radiohead_03.jpg'),
      album35: require('@/assets/img/band/auteurs/album/album_auteurs_01.jpg'),
      album36: require('@/assets/img/band/verve/album/album_verve_03.jpg'),

      album41: require('@/assets/img/band/xx/album/album_xx_01.jpg'),
      album42: require('@/assets/img/band/xx/album/album_xx_03.jpg'),
      album43: require('@/assets/img/band/aphextwin/album/album_aphextwin_01.jpg'),
      album44: require('@/assets/img/band/massiveattack/album/album_massiveattack_01.jpg'),
      album45: require('@/assets/img/band/prodigy/album/album_prodigy_03.jpg'),
      album46: require('@/assets/img/category/album/album_depechemode_01.jpg'),

      album51: require('@/assets/img/category/album/album_ledzeppelin_01.jpg'),
      album52: require('@/assets/img/category/album/album_beatles_01.jpg'),
      album53: require('@/assets/img/category/album/album_pinkfloyd_01.jpg'),
      album54: require('@/assets/img/category/album/album_thewho_01.jpg'),
      album55: require('@/assets/img/category/album/album_sexpistols_01.jpg'),
      album56: require('@/assets/img/category/album/album_thecure_01.jpg'),

      album61: require('@/assets/img/category/album/adele.jpg'),
      album62: require('@/assets/img/category/album/lilyallen.jpg'),
      album63: require('@/assets/img/category/album/amywinehouse.jpg'),
      album64: require('@/assets/img/category/album/bethorton.jpg'),
      album65: require('@/assets/img/category/album/katenash.jpg'),
      album66: require('@/assets/img/category/album/pjharvey.jpg'),
    };
  },
  methods: {
    onSlideStart(slide) {
      this.sliding = true;
    },
    onSlideEnd(slide) {
      this.sliding = false;
    },
    listArtist() {
      this.$axios
        .get('/api/artists/', { params: { category: this.$route.params.name, showLoading: true } })
        .then(response => {
          var res = response.data;
          this.artistList = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    listAlbum() {
      this.$axios
        .get('/api/albums-recommend/', { params: { category: this.$route.params.name, showLoading: true } })
        .then(response => {
          var res = response.data;
          this.albumList = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    searchArtist() {
      this.$axios
        .get('/api/artists-search/', { params: { artist: this.inputVal, showLoading: false } })
        .then(response => {
          var res = response.data;
          if (res.name == '') {
            this.$refs.myWarning1.show();
          } else {
            this.artist = res;
            this.$router.push({
              path: '/artist/' + this.artist.alias,
              query: {
                category: this.artist.category,
              },
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    focus: function() {
      if (document.querySelector('#search') == document.activeElement) {
        this.fuzzy_search(this.inputVal.trim());
      }
    },
    fuzzy_search: function(value) {
      var that = this;
      if (!value) {
        that.fuzzy_list = [];
        return;
      }
      //调取接口
      this.$axios
        .get('/api/artists-fuzzy/', { params: { artist: this.inputVal, showLoading: false } })
        .then(response => {
          var res = response.data;
          that.fuzzy_list = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  head() {
    return {
      title: this.category_name,
    };
  },
  mounted: function() {
    this.$store.dispatch('hideloader');
    this.$emit('showCategory', this.$route.params.name);
    //if (this.num_comments) {
    //  this.$emit('refreshComment', this.num_comments);
    //}
    if (this.$route.params.name == 'britpop') {
      this.$route.meta.title = '英伦摇滚乐';
      this.category_name = '英伦摇滚乐';
    } else if (this.$route.params.name == 'scotland') {
      this.$route.meta.title = '苏格兰流行乐';
      this.category_name = '苏格兰流行乐';
    } else if (this.$route.params.name == 'shoegaze') {
      this.$route.meta.title = '自赏派音乐';
      this.category_name = '自赏派音乐';
    } else if (this.$route.params.name == 'ireland') {
      this.$route.meta.title = '爱尔兰流行乐';
      this.category_name = '爱尔兰流行乐';
    } else if (this.$route.params.name == 'electronic') {
      this.$route.meta.title = '英国电子乐';
      this.category_name = '英国电子乐';
    } else if (this.$route.params.name == 'classic') {
      this.$route.meta.title = '经典老摇滚';
      this.category_name = '经典老摇滚';
    } else if (this.$route.params.name == 'female') {
      this.$route.meta.title = '英伦玫瑰';
      this.category_name = '英伦玫瑰';
    } else if (this.$route.params.name == 'male') {
      this.$route.meta.title = '英伦男声';
      this.category_name = '英伦男声';
    } else if (this.$route.params.name == 'indie') {
      this.$route.meta.title = '新生代独立音乐';
      this.category_name = '新生代独立音乐';
    }
    document.title = this.$route.meta.title;
    //this.listArtist();
    //this.listAlbum();
	//this.$parent.show_tooltip2()	
  },
  watch: {
    inputVal: function() {
      this.focus();
    },
	$route(to, from) {
	  //this.$parent.show_tooltip2();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h4 {
  text-shadow: 2px 2px 8px #00fa9a;
}
h5 {
  text-shadow: 2px 2px 8px #00fa9a;
}

.content_artist {
  margin: 0 auto;
  max-width: 720px;
  border: 5px outset grey;
  box-shadow: 8px 8px 20px #aaaaaa;
}

.content_album {
  padding: 15px;
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.6);
  border: 5px outset grey;
}

.content_album .row {
  padding: 0px;
  margin: 0px;
}

.carousel-item {
  position: relative;
  padding-top: 60%;
}

.carousel-item img {
  position: absolute;
  top: 0;
  right: 0;
}

.pointer {
  cursor: pointer; 
}

.placeholder148 {
    width: 148px;
    height: 148px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(~@/assets/img/background/album_148x148.png);
}

</style>

<!--<style src="../../assets/css/link.css"></style>-->
<!--<style src="../../assets/css/font.css"></style>-->
<!--<style src="../../assets/css/layout.css"></style>-->

